<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <div class="divs">
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        运营管理/运单/<span style="color: #0098FF;">手动调度</span>
                    </span>
                </div>
                <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;基础信息</p>
                <el-form :model="form" label-width="auto" ref="refform" :rules="rules">
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="运单号:" prop="Wb_number">
                                    <el-input v-model="form.Wb_number" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="始发地:" prop="Origin_place">
                                    <el-cascader v-model="form.Origin_place" :options="Addressvalue" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="目的地:" prop="Det_place">
                                    <el-cascader v-model="form.Det_place" :options="Addressvalue" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="运输方式:" prop="Tran_manager">
                                    <el-select v-model="form.Tran_manager" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in Tran_manager" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1098px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;承运商</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="承运商名称:" prop="Cr_id">
                                    <el-select v-model="form.Cr_id" placeholder="请选择" style="width: 240px"
                                        @change="handleChange2">
                                        <el-option v-for="item in Cr_cp_name" :key="item.value" :label="item.cr_cp_name"
                                            :value="item.cr_id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="联系人姓名:" prop="name">
                                    <el-input v-model="name" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="联系人手机号码:" prop="phone">
                                    <el-input v-model="phone" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="司机姓名:" prop="Dv_id">
                                    <el-select v-model="form.Dv_id" placeholder="请选择" style="width: 240px"
                                        @change="dv2">
                                        <el-option v-for="item in DV_tableData" :key="item.value" :label="item.dv_name"
                                            :value="item.dv_id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="司机手机号码:" prop="Dv_phone">
                                    <el-input v-model="Dv_phone" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="车牌号:" prop="Vc_id">
                                    <el-select v-model="form.Vc_id" placeholder="请选择" style="width: 240px"
                                        @change="show4">
                                        <el-option v-for="item in Dv_cp" :key="item.value" :label="item.vc_phone"
                                            :value="item.vc_id" :item="item" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="车型:">
                                    <el-input v-model="Vc_model" placeholder="请输入内容" clearable readonly />
                                    <!-- <el-select v-model="Vc_model" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in DDZTvalue" :key="item.value" :label="item.dict_label"
                                            :value="item.dict_value" />
                                    </el-select> -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="车长:">
                                    <el-input v-model="Vc_length" placeholder="请输入内容" clearable readonly />
                                    <!-- <el-select v-model="Vc_length" placeholder="请选择" style="width: 240px" :disabled="true">
                                        <el-option v-for="item in DDZTvalue" :key="item.value" :label="item.dict_label"
                                            :value="item.dict_value" />
                                    </el-select> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;货物信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-table :data="Cargotabledata">
                                    <el-table-column type="index" label="序号" width="100" />
                                    <el-table-column property="ord_number" label="订单编号" />
                                    <el-table-column property="ord_startaddress" label="始发地" />
                                    <el-table-column property="ord_destination" label="目的地" />
                                    <el-table-column property="cg_name" label="货物名称" />
                                    <el-table-column property="cg_num" label="数量" />
                                    <el-table-column property="cg_volume" label="体积(m³)" />
                                    <el-table-column property="cg_weight" label="重量(kg)" />
                                    <el-table-column property="" label="分摊运费(元)" />
                                    <el-table-column property="" label="装卸费(元)" />
                                    <el-table-column property="" label="包装费(元)" />
                                </el-table>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="总数量:">
                                    <el-input v-model="cg_num" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="总体积:">
                                    <el-input v-model="cg_volume" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="总重量:">
                                    <el-input v-model="cg_weight" placeholder="请输入内容" clearable readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="计费方式:" prop="Bill_method">
                                    <el-select v-model="form.Bill_method" placeholder="请选择" style="width: 240px">
                                        <el-option v-for="item in Bill_methodtabledata" :key="item.value"
                                            :label="item.dict_label" :value="item.dict_code" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="运费成本:" prop="Freight_costs">
                                    <el-input v-model.parseFloat="form.Freight_costs" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="装卸费:" prop="Handling_fee">
                                    <el-input v-model.parseFloat="form.Handling_fee" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="包装费:" prop="Packag_fee">
                                    <el-input v-model.parseFloat="form.Packag_fee" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="其他费用:" prop="Other_fee">
                                    <el-input v-model.parseFloat="form.Other_fee" placeholder="请输入内容" clearable
                                        @input="num1" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="运费合计:" prop="Freight_count">
                                    <el-input v-model.parseFloat="form.Freight_count" placeholder="请输入内容" clearable
                                        readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;付款方式</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="现付:" prop="Pay_as_you_go">
                                    <el-input v-model.parseFloat="form.Pay_as_you_go" placeholder="请输入内容" clearable
                                        @input="num2" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="预付:" prop="Prepayment">
                                    <el-input v-model.parseFloat="form.Prepayment" placeholder="请输入内容" clearable
                                        @input="num2" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="到付:" prop="Collect">
                                    <el-input v-model.parseFloat="form.Collect" placeholder="请输入内容" clearable
                                        @input="num2" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="周期付:" prop="Periodical_payment">
                                    <el-input v-model.parseFloat="form.Periodical_payment" placeholder="请输入内容" clearable
                                        @input="num2" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="付费合计:" prop="Pay_count">
                                    <el-input v-model.parseFloat="form.Pay_count" placeholder="请输入内容" clearable
                                        readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;其他信息</p>
                    <div
                        style="background-color: #fff;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="计划发车时间:" prop="Plan_time">
                                    <el-date-picker v-model="form.Plan_time" type="datetime" format="YYYY-MM-DD"
                                        value-format="YYYY-MM-DD" placeholder="请选择时间" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="实际发车时间:" prop="Reality_time">
                                    <el-date-picker v-model="form.Reality_time" type="datetime" placeholder="请选择时间"
                                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="计划到达时间:" prop="Planget_time">
                                    <el-date-picker v-model="form.Planget_time" type="datetime" placeholder="请选择时间"
                                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="实际到达时间:" prop="Realityget_time">
                                    <el-date-picker v-model="form.Realityget_time" type="datetime" placeholder="请选择时间"
                                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="height: 50px;"></div>
                    <div class="button">
                        <el-form-item>
                            <el-button @click="qx">取消</el-button>
                            <el-button type="primary" @click="Update">保存</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Phone, Plus } from '@element-plus/icons-vue';
import { Upload } from 'element-plus';
import { useRouter, useRoute } from "vue-router";
import $http from '@/axios/base.js';
export default {
    setup() {
        let route = useRoute();
        let router = useRouter();
        let Addressvalue = ref([]);   //起始地和目的地的值
        let Tran_manager = ref([]);  //运输方式
        let Cr_cp_name = ref([]);  //承运商下拉框
        let name = ref('');   //承运商联系人姓名
        let phone = ref('');   //承运商联系人手机号
        let DV_tableData = ref([]);  //司机下拉框
        let Dv_phone = ref('');  //司机手机号
        let Dv_cp = ref([]);  //车牌号下拉框
        // let ord_id=ref('');   //订单id
        let Cargotabledata = ref([]);//货物信息
        let cg_num = ref(0);   //货物数量的和
        let cg_volume = ref(0);   //总体积
        let cg_weight = ref(0);   //总重量
        let Bill_methodtabledata = ref([]);  //计费方式下拉框
        let Vc_length = ref('');  //车长
        let Vc_model = ref('');  //车型
        let refform = ref(null);   //判断空值

        onMounted(() => {
            form.Ord_id = route.query.ord_id;
            form.Wb_id = route.query.wb_id;
            show();
            Address();
            showtype();
            ShowCY();
            Cargoshow();
            Jftype();
        })

        let form = reactive({
            Wb_id: null, // 运单Id
            Wb_number: '', // 运单号
            Wb_status: 0, // 运单状态
            Origin_place: '', // 始发地
            Det_place: '', // 目的地
            Tran_manager: null, // 运输方式
            Order_time: null, // 下单时间
            Create_time: null, // 创建时间
            Create_by: '', // 创建人
            Last_time: new Date(), // 最后更新时间
            Last_by: sessionStorage.getItem("empname"), // 最后更新人
            Plan_time: null, // 计划发车时间
            Reality_time: null, // 实际发车时间
            Planget_time: null, // 计划到达时间
            Realityget_time: null, // 实际到达时间
            Audit_status: 0, // 审核状态
            Payable_status: null, // 应付对账单-结算状态
            Dv_id: null, // 司机id
            Ord_id: null, // 订单id
            Cr_id: null, // 承运商id
            Vc_id: null, // 车辆id
            Vc_model: 0, // 车型
            Vc_length: 0, // 车长
            Bill_method: null, // 计费方式
            Freight_costs: null, // 运费成本
            Packag_fee: null, // 包装费
            Handling_fee: null, // 装卸费
            Other_fee: null, // 其他费用
            Freight_count: null, // 运费合计
            Pay_as_you_go: null, // 现付
            Prepayment: null, // 预付
            Collect: null, // 到付
            Periodical_payment: null, // 周期付
            Pay_count: null, // 付费合计
        })

        const rules = reactive({
            Wb_id: [
                { required: true, message: '运单Id不能为空', trigger: 'blur' }
            ],
            Wb_number: [
                { required: true, message: '运单号不能为空', trigger: 'blur' }
            ],
            Origin_place: [
                { required: true, message: '始发地不能为空', trigger: 'blur' }
            ],
            Det_place: [
                { required: true, message: '目的地不能为空', trigger: 'blur' }
            ],
            Tran_manager: [
                { required: true, message: '运输方式不能为空', trigger: 'blur' }
            ],
            Order_time: [
                { required: true, message: '下单时间不能为空', trigger: 'blur' }
            ],
            Create_time: [
                { required: true, message: '创建时间不能为空', trigger: 'blur' }
            ],
            Create_by: [
                { required: true, message: '创建人不能为空', trigger: 'blur' }
            ],
            Last_by: [
                { required: true, message: '最后更新人不能为空', trigger: 'blur' }
            ],
            Plan_time: [
                { required: true, message: '计划发车时间不能为空', trigger: 'blur' }
            ],
            Reality_time: [
                { required: true, message: '实际发车时间不能为空', trigger: 'blur' }
            ],
            Planget_time: [
                { required: true, message: '计划到达时间不能为空', trigger: 'blur' }
            ],
            Realityget_time: [
                { required: true, message: '实际到达时间不能为空', trigger: 'blur' }
            ],
            Dv_id: [
                { required: true, message: '司机id不能为空', trigger: 'blur' }
            ],
            Ord_id: [
                { required: true, message: '订单id不能为空', trigger: 'blur' }
            ],
            Cr_id: [
                { required: true, message: '承运商id不能为空', trigger: 'blur' }
            ],
            Vc_id: [
                { required: true, message: '车辆id不能为空', trigger: 'blur' }
            ],
            Bill_method: [
                { required: true, message: '计费方式不能为空', trigger: 'blur' }
            ],
            Freight_costs: [
                { required: true, message: '运费成本不能为空', trigger: 'blur' }
            ],
            Packag_fee: [
                { required: true, message: '包装费不能为空', trigger: 'blur' }
            ],
            Handling_fee: [
                { required: true, message: '装卸费不能为空', trigger: 'blur' }
            ],
            Other_fee: [
                { required: true, message: '其他费用不能为空', trigger: 'blur' }
            ],
            Freight_count: [
                { required: true, message: '运费合计不能为空', trigger: 'blur' }
            ],
            Pay_as_you_go: [
                { required: true, message: '现付不能为空', trigger: 'blur' }
            ],
            Prepayment: [
                { required: true, message: '预付不能为空', trigger: 'blur' }
            ],
            Collect: [
                { required: true, message: '到付不能为空', trigger: 'blur' }
            ],
            Periodical_payment: [
                { required: true, message: '周期付不能为空', trigger: 'blur' }
            ],
            Pay_count: [
                { required: true, message: '付费合计不能为空', trigger: 'blur' }
            ],
            Cr_encode: [
                { required: true, message: '承运商编码不能为空', trigger: 'blur' }
            ]
        });

        function Address() {   //始发地和目的地的绑定值
            axios.get("http://localhost:5261/api/Children/GetChildrens").then((res) => {
                Addressvalue.value = res.data;
                console.log(Addressvalue.value);
            }).catch((err) => {
                console.log("错误：" + err);
            })
        }

        function showtype() {   //运输方式下拉框
            $http.get("http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=Tran_manager").then((res) => {
                Tran_manager.value = res;
                console.log(Tran_manager.value)
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function show() {   //赋初始值
            $http.get(`http://localhost:5261/api/Wb_meter/GetWb_Meters_Wb_id/${form.Wb_id}`).then((res) => {
                form.Wb_number = res[0].wb_number;
                form.Origin_place = res[0].origin_place.split('/');
                form.Det_place = res[0].det_place.split('/');
                form.Cr_id = res[0].cr_id;
                show2(res[0].tran_manager);
                handleChange(form.Cr_id);
                form.Dv_id = res[0].dv_id;
                form.Bill_method = res[0].bill_method;
                form.Freight_costs = res[0].freight_costs;
                form.Packag_fee = res[0].packag_fee;
                form.Handling_fee = res[0].handling_fee;
                form.Other_fee = res[0].other_fee;
                form.Freight_count = res[0].freight_count;
                form.Pay_as_you_go = res[0].pay_as_you_go;
                form.Prepayment = res[0].prepayment;
                form.Collect = res[0].collect;
                form.Periodical_payment = res[0].periodical_payment;
                form.Pay_count = res[0].pay_count;
                form.Plan_time = res[0].plan_time;
                form.Reality_time = res[0].reality_time;
                form.Planget_time = res[0].planget_time;
                form.Realityget_time = res[0].realityget_time;
                form.Create_time = res[0].create_time;
                form.Create_by = res[0].create_by;
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function show2(value) {   //转换运输类型
            switch (value) {
                case 0:
                    form.Tran_manager = '汽车运输';
                    break;
                case 1:
                    form.Tran_manager = '海运';
                    break;
                case 2:
                    form.Tran_manager = '空运';
                    break;
                case 3:
                    form.Tran_manager = '铁路';
                    break;
            }
        }

        function ShowCY() {   //承运商下拉框
            $http.get(`http://localhost:5261/api/Order/GetCarrier_Ments`).then((res) => {
                Cr_cp_name.value = res;
            }).catch((err) => {
                console.log("错误:" + err)
            })
        }

        function handleChange(value) {   //根据承运商填写联系人相关信息
            $http.get(`http://localhost:5261/api/Carrier_ment/GetCarrier_Ments_Update?Cr_id=${value}`).then((res) => {
                name.value = res[0].cr_name;
                phone.value = res[0].cr_phone;
                SJ(value)
            })
        }

        function handleChange2(value) {   //承运商的改变事件
            form.Dv_id = '';
            Dv_phone.value = '';
            form.Vc_id = '';
            Vc_length.value = '';
            Vc_model.value = '';
            Dv_cp.value = '';
            $http.get(`http://localhost:5261/api/Carrier_ment/GetCarrier_Ments_Update?Cr_id=${value}`).then((res) => {
                name.value = res[0].cr_name;
                phone.value = res[0].cr_phone;
            })
            // handleChange(value);
            SJ2(value);
        }

        function SJ(value) {   //司机下拉框
            $http.get(`http://localhost:5261/api/Order/GetDrivers_Ments/${value}`).then((res) => {
                DV_tableData.value = res;
                dv(res[0].dv_id);
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function SJ2(value) {   //承运商改变后重新查找司机下拉框
            $http.get(`http://localhost:5261/api/Order/GetDrivers_Ments/${value}`).then((res) => {
                DV_tableData.value = res;
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function dv(value) {   //根据司机id查询司机手机
            // form.Vc_id = '';
            // form.Vc_length = '';
            // form.Vc_model = '';
            $http.get(`http://localhost:5261/api/Order/GetDrivers_Ments_id/${value}`).then((res) => {
                Dv_phone.value = res[0].dv_phone;
                show3(value);
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function dv2(value) {   //司机改变事件
            form.Vc_id = '';
            Vc_length.value = '';
            Vc_model.value = '';
            dv(value)
        }

        function show3(value) {   //车牌号下拉框s
            $http.get(`http://localhost:5261/api/Order/GetVehicles_Ments/${value}`).then((res) => {
                Dv_cp.value = res;
                form.Vc_id = res[0].vc_id;
                show4(form.Vc_id);
                console.log(Dv_cp.value);
            })
        }

        function show4(value) {   //查询车型和车长
            const selectedItem = Dv_cp.value.find(item => item.vc_id === value);
            $http.get(`http://localhost:5261/api/Order/Get_Dict_Datas/${selectedItem.vc_model},${selectedItem.vc_length}`).then((res) => {
                Vc_model.value = res[0].dict_label;
                Vc_length.value = res[1].dict_label;
            }).catch((err) => {
                console.log("错误:" + err)
            })
        }

        function Cargoshow() {  //查询货物
            $http.get(`http://localhost:5261/api/Order/GetOrder_Cargos/${form.Ord_id}`).then((res) => {
                Cargotabledata.value = res;
                console.log(Cargotabledata.value);
                cg_num.value = Cargotabledata.value.reduce((num, item) => {   //总数量
                    return num + (parseFloat(item.cg_num) || 0)
                }, 0);
                cg_volume.value = Cargotabledata.value.reduce((num, item) => {   //总体积
                    return num + (parseFloat(item.cg_volume) || 0)
                }, 0) + "m³";
                cg_weight.value = Cargotabledata.value.reduce((num, item) => {   //总重量
                    return num + (parseFloat(item.cg_weight) || 0)
                }, 0) + "kg";
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function Jftype() {   //查询计费方式
            $http.get(`http://localhost:5261/api/Sys_Dict_data/GetSys_Dict_Datas?type=Bill_method`).then((res) => {
                Bill_methodtabledata.value = res;
            }).catch((err) => {
                console.log("错误:" + err)
            })
        }

        function num1() {   //计算费用
            form.Freight_count = (parseFloat(form.Freight_costs) + parseFloat(form.Packag_fee) + parseFloat(form.Handling_fee) +
                parseFloat(form.Other_fee)).toFixed(2);
        }

        function num2() {   //计算付费合计
            if (!isNaN(form.Pay_as_you_go) && !isNaN(form.Prepayment) && !isNaN(form.Collect) && !isNaN(form.Periodical_payment)) {
                form.Pay_count = (parseFloat(form.Pay_as_you_go) + parseFloat(form.Prepayment) + parseFloat(form.Collect) + parseFloat(form.Periodical_payment)).toFixed(2)
            } else {
                form.Pay_count = 0;
            }

        }

        function Update() { //保存修改
            refform.value.validate((valid) => {
                if (valid) {
                    form.Origin_place = form.Origin_place[0] + "/" + form.Origin_place[1] + "/" + form.Origin_place[2];
                    form.Det_place = form.Det_place[0] + "/" + form.Det_place[1] + "/" + form.Det_place[2];
                    console.log(form.Tran_manager);
                    if (form.Tran_manager == "汽车运输") {
                        form.Tran_manager = 0;
                    }
                    $http.post(`http://localhost:5261/api/Wb_meter/Update`, form).then((res) => {
                        if (res) {
                            ElMessage.success("编辑成功!");
                            router.push('/Wb_meter');
                        } else {
                            ElMessage.warning("编辑失败!");
                        }
                    })
                } else {
                    ElMessage.warning("请填写完整数据!");
                }
            })

        }

        function qx() {  //取消返回主页面
            router.push('/Wb_meter');
        }

        return {
            form,
            Addressvalue,
            Tran_manager,
            Cr_cp_name,
            name,
            phone,
            handleChange,
            DV_tableData,
            Dv_phone,
            Dv_cp,
            handleChange2,
            dv2,
            Cargotabledata,
            cg_num,
            cg_volume,
            cg_weight,
            Bill_methodtabledata,
            num1,
            num2,
            Update,
            qx,
            Vc_model,
            Vc_length,
            refform,
            rules
        }

    }
}
</script>

<style scoped>
.common-layout {
    /* box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5); */
    background-color: #F5F9FF;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
    /* margin: 50px; */
    /* display: flex;
    align-items: center; */
}

.title {
    padding-right: 995px;
    padding-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: aqua;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 100px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.button {
    padding-right: 37px;
    margin-top: 20px;
    height: 50px;
    position: fixed;
    /* 固定位置 */
    top: auto;
    /* 距离顶部20像素 */
    right: 70px;
    /* 距离右侧20像素 */
    bottom: 20px;
    /* 底部自动 */
    left: auto;
    /* 左侧自动 */
    z-index: 1000;
    /* 确保它在其他内容之上 */

}
</style>